<template>
  <div class="hello">
    <h4>vue动态播放本地视频</h4>
    <div>
      <p>一、import</p>
      <button @click="play1" class="play-btn">play1</button>
      <video controls ref="videoDom1" class="video-box" autoplay>
        <source src="" type="video/mp4" />
      </video>
    </div>

    <div>
      <p>二、require</p>
      <button @click="play2" class="play-btn">play2</button>
      <video controls ref="videoDom2" class="video-box" autoplay>
        <source src="" type="video/mp4" />
      </video>
    </div>

    <div>
      <p>三、a标签</p>
      <a :href="video2" target="_blank" class="play-btn">play3</a>
    </div>


  </div>
</template>

<script>
import video1 from "@/assets/video/test视频.mp4";
export default {
  name: "HelloWorld",
  data() {
    return {
      videoUrl1: "",
      videoUrl2:'',
      video2: require('@/assets/video/test视频.mp4')
    };
  },
  methods: {
    play1() {
      this.$refs.videoDom1.src = video1;
    },
    play2() {
      this.$refs.videoDom2.src = this.video2;
    }
  }
};
</script>

<style scoped>
p{
  padding:10px 8px;
  color:#fff;
  font-weight: bold;
  background:#465af5;
}
.play-btn{
  margin:20px 0;
  display: block;
  width:120px;
  height:30px;
  line-height:30px;
  text-align: center;
  background:#eee;
  border:1px solid #cec5c5;
}
.video-box {
  width: 400px;
  height: 300px;
  border:1px solid #eee;
}
</style>
